// 查询用户购物车中的商品 接口
// 接口地址：http://jx.xuzhixiang.top/ap/api/cart-list.php
// 接口请求方式：get 接口参数： id  用户id
var uid = localStorage.getItem("id")

function localCarList() {
    let cartListAPI = `http://jx.xuzhixiang.top/ap/api/cart-list.php`;
    axios.get(cartListAPI, {
        params: {
            id: uid
        }
    }).then(r => {
        console.log(r.data);
        let cartArr = r.data.data
        //循环遍历 ,map映射 将对象数组映射为字符串数组
        let liArr = cartArr.map(v =>
            // <button onclick=delBtnClick(${ v.pid }, this) > 删除</button>  
            `
<li >  
    <ul class="goodsDesc">
        <li style=" margin-right:40px;"><input type="checkbox"></li>

        <li style="width:300px;">
        <div style="display:flex;"><img src="${v.pimg}" alt="">
        <p style="line-height:80px;margin-left:10px font-size:15px">${v.pname}</p>
        </div>
        </li>
        <li style="width:100px;"> ￥${v.pprice}</li>

        <li style="width:150px;text-align:center">
        <span class="reduce" onclick=jian(${v.pid},${v.pnum},this)>-</span>
        <input min="0" type="number" style="width:50px;height:33px;float:left;text-align:center;" value=${v.pnum}> 
        <span class="add" onclick=jia(${v.pid},${v.pnum},this)>+</span>
        </li>

        <li style="color:red;width:100px;text-align:center;">￥：${v.pnum * v.pprice}</li>
        
        <li style="width:95px;text-align:center;">
        <button onclick=delBtnClick(${ v.pid },this)>删除</button>
        </li>
    </ul>
</li> 
                    `

        )
        //多个li标签链接成一个字符串给ul
        document.querySelector("#clist").innerHTML = liArr.join("")
    })
}
localCarList();
//显示购物车内商品种类数量
let cartnumAPI = `http://jx.xuzhixiang.top/ap/api/cart-list.php?id=${uid}`
let p3 = axios.get(cartnumAPI, {
    params: {
        id: uid
    }
}).then(r => {
    console.log("数据");
    console.log(r.data.data.length);
    let str3 = `${r.data.data.length}`
    goodsnum.innerHTML = str3
})


// 接口地址：http://jx.xuzhixiang.top/ap/api/cart-update-num.php
// 接口请求方式：get
// 接口参数：
//      uid  用户id
//      pid  商品id
//      pnum  要添加的商品数量
// http://jx.xuzhixiang.top/ap/api/cart-update-num.php?uid=1&pid=1&pnum=1

// 减数
function jian(pidd,numb , btn) {
    console.log(btn);
    numb--;
    if (numb <= 1) {
        numb = 1;
    } let pnum = numb;
    let url = `http://jx.xuzhixiang.top/ap/api/cart-update-num.php?uid=${uid}&pid=${pidd}&pnum=${pnum}`;
   
    axios.get(url, {
        params: {
            pid: pidd, uid, pnum
        }
    }).then(r => {

        console.log(r.data);
    })
    localCarList();
}
// 加数
function jia(pidd ,numb, btn) {
    console.log("numb=" + numb);
    numb++;let pnum = numb;
    let url = `http://jx.xuzhixiang.top/ap/api/cart-update-num.php?uid=${uid}&pid=${pidd}&pnum=${numb}`;
    
    console.log("numb+=pnum:" + pnum);
    axios.get(url, {
        params: {
            pid: pidd, uid, pnum
        }
    }).then(r => {
        console.log(r.data);
    })
    localCarList();
}

/* 
接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
接口请求方式：get 接口参数：uid  用户id pid  商品id
*/
function delBtnClick(pid, btn) {
    let  delAPI= `http://jx.xuzhixiang.top/ap/api/cart-delete.php`;
    axios.get(delAPI, {
        params: {
            uid,
            pid
        }
    }).then(r => {
        console.log(r.data);
        console.log("删除成功");
        btn.parentNode.parentNode.parentNode.remove();
        localCarList();
    })
}
shouye.onclick = function () {
    location.href = "list.html"
}